<template>
    <div class="menu">
        <div class="top">
            <van-icon class="return" name="revoke" @click="back"/>
            <van-search class="search" placeholder="请输入商品名" shape = "round" @click = "GoSearch" />
        </div>
        <div class="menu-box">
            <div class="menu-list">
                <van-sidebar v-model="activeKey" @change="toggleType" >
                    <van-sidebar-item @click="clicktab(index)"  :title="item.typeDesc" v-for="(item,index) in MenuListData" :key="index" />
                </van-sidebar>
            </div>
            <div class="menu-product">
                 <!-- 原味纯茶 -->
                 <div class="product-item"  :key="index" @click="enterDetail(item.id,item)" v-for = "(item,index) in currentProductDataList.pureTea">
                    <div class="item-left">
                        <img class="img-auto" :src="item.Img">
                    </div>
                    <div class="item-right">
                        <p class="item-name">{{item.name}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                        <div class="price-add">
                            <div class="price">&yen;{{item.price}}</div>
                            <div class="add">
                                <button type="button" class="btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 芝士奶盖 -->
                <div class="product-item" :key="index" @click="enterDetail(item.id,item)" v-for = "(item,index) in currentProductDataList.cheese">
                    <div class="item-left">
                        <img class="img-auto" :src="item.Img">
                    </div>
                    <div class="item-right">
                        <p class="item-name">{{item.name}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                        <div class="price-add">
                            <div class="price">&yen;{{item.price}}</div>
                            <div class="add">
                                <button type="button" class="btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
               
                <div class="product-item" :key="index"  @click="enterDetail(item.id,item)" v-for = "(item,index) in currentProductDataList.fruitTea">
                    <div class="item-left">
                        <img class="img-auto" :src="item.Img">
                    </div>
                    <div class="item-right">
                        <p class="item-name">{{item.name}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                        <div class="price-add">
                            <div class="price">&yen;{{item.price}}</div>
                            <div class="add">
                                <button type="button" class="btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item" :key="index" @click="enterDetail(item.id,item)" v-for = "(item,index) in currentProductDataList.milkyTea">
                    <div class="item-left">
                        <img class="img-auto" :src="item.Img">
                    </div>
                    <div class="item-right">
                        <p class="item-name">{{item.name}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                        <div class="price-add">
                            <div class="price">&yen;{{item.price}}</div>
                            <div class="add">
                                <button type="button" class="btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item" :key="index" @click="enterDetail(item.id,item)" v-for = "(item,index) in currentProductDataList.coffee">
                    <div class="item-left">
                        <img class="img-auto" :src="item.Img">
                    </div>
                    <div class="item-right">
                        <p class="item-name">{{item.name}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                        <div class="price-add">
                            <div class="price">&yen;{{item.price}}</div>
                            <div class="add">
                                <button type="button" class="btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <van-icon name="cart"  class="shopCar" @click = "tocar" />
            <van-icon name="like" class="lick" @click = tolick />
            <!-- <div class="total">合计:&yen;0</div> -->
        </div>
    </div>
</template>

<script>
import {getProduct} from "../api/Product.js"
import {getMenuData} from '../api/MenuData.js'
// import { query } from "express";
    export default {
        name:"Menu",
        components:{
            getMenuData,
            getProduct
        },  
        data(){
            return{
                activeKey:-1,
                MenuListData:[],
                ProductData:[],
                currentProductDataList:{},
                tab:0,
                show:false,
                allProduct:[]
                
            }
        },

        created(){
            // this.activeKey = 0
            // 商品类型
            getMenuData().then((data) => {
            this.MenuListData = data.MenuList;
            console.log(this.MenuListData);
           
            });
            
            getProduct().then((data)=>{
                this.ProductData.push({ pureTea:data.pureTea});
                console.log(this.ProductData);
                this.allProduct.push(...data.pureTea)
            })
            getProduct().then((data)=>{
                this.ProductData.push({cheese:data.cheese});
                console.log(this.ProductData);
                this.allProduct.push(...data.cheese)
            })
            getProduct().then((data)=>{
                this.ProductData.push({fruitTea:data.fruitTea});
                console.log(this.ProductData);
                this.allProduct.push(...data.fruitTea)
            })
            getProduct().then((data)=>{
                this.ProductData.push({milkyTea:data.milkyTea});
                console.log(this.ProductData);
                console.log(data.milkyTea);
                this.allProduct.push(...data.milkyTea)

            })
            getProduct().then((data)=>{
                console.log(data.coffee);
                this.ProductData.push({coffee:data.coffee});
                console.log(this.ProductData);
                this.allProduct.push(...data.coffee)
                console.log(this.allProduct);

            })
            
            // this.toggleType()
        //    console.log(this.ProductData);
            console.log(this.allProduct);
        },
       
      
        methods:{
           
            back(){
                this.$router.push({
                    name:"Eat"
                })
            },
            clicktab(index){
                console.log(index);
                this.tab = index
            },  
            enterDetail(id,item){
                this.$router.push({
                    name:"Productdetail",
                    // params:{
                    //     id,
                    //     item
                    // }
                    // query:JSON.stringify(id),
                    query:{
                        item:JSON.stringify(item)}
                })
            },
            // 切换商品类型
            toggleType(index){
                // console.log(index);
                console.log(index);
                let currentType = this.MenuListData[index].type
                // console.log(this.MenuListData);
                // this.getProductByType(currentType)
                // console.log(currentType);
                // console.log(this.ProductData);

  

                    this.ProductData.forEach(item=>{
                        for(let key in item){
                            if(key===currentType){
                        // 当前类型对应的商品数据        
                        let currentProductData = item
                        // console.log(currentProductData);
                        this.currentProductDataList = currentProductData
                        // 点击的类型的商品数据
                        console.log(this.currentProductDataList);
                        }
                        }
                        // console.log(item.ice);
                        // console.log(item.pureTea);
                        // if()

                        
                    })
                
                

            },
            GoSearch(){
                this.$router.push({
                    name:"Search",
                    query:{
                        allProduct:JSON.stringify(this.allProduct)
                    }
                })
            },
            
            // 去购物车
        tocar() {
            this.$router.push({
                name: "Car",
            });
        },
        tolick(){
            this.$router.push({
                name:"Lick",
            
            })
        }
        },
        
        // watch:{
        //     title:{
        //         handler:'toggleType',
        //         immediate:true
        //     }
        // }
        
    }
    
</script>

<style lang="less" scoped>
    .menu{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .foot{
            width: 100%;
            height: 60px;
            background-color: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-top: 1px solid #e5e5e5;
            .shopCar{
                font-size: 30px;
                color: #e4393c;
                margin: 0 10px 0 15px ;
            }
            .lick{
                font-size: 30px;
                color: #e4393c;
                margin: 0 0 0 0 ;
            }
        }
        .menu-box{
            height: calc(100% - 118px);
            display: flex;
            .menu-list{
                width: 80px;
                height: 100%;
                // 内容溢出出现滚动条
                overflow-y: auto;
                background-color: #f7f8fa;
                // background-color: #f6f0f0;
                .van-sidebar-item--select::before{
                    height: 40px;
                    width: 3px;
                }
            
            }
            .menu-product{
                width: calc(100% - 80px);
                height: 100%;
                overflow-y: auto;
                background-color: #fff;
                .product-item{
                    width: 265px;
                    height: 80px;
                    // background-color: pink;
                    background-color: #fff;
                    margin: 0 15px 20px 15px;
                    border-radius: 10px;
                    display: flex;
                    .item-left{
                        width: 30%;
                        height: 100%;
                        .img-auto{
                            width: 100%;
                            display: block;
                        }
                        
                    }
                    .item-right{
                        width: 70%;
                        height: 100%;
                        // background-color: green;
                        .item-name{
                            font-weight: 700;
                            font-size: 17px;
                            margin-left: 5px;

                        }
                        .item-desc{
                            height: 35px;
                            color: #b0aaaa;
                            margin-left: 5px;
                            font-size: 13px;

                        }
                        .price-add{
                            margin-left: 5px;
                            display: flex;
                            margin:  10px 0 0 5px ;
                            font-size: 15px;
                            font-weight: 700;
                            .price{
                                margin-right: 130px;
                            }
                            .add{
                                .btn{
                                    width: 22px;
                                    height: 22px;
                                    border-radius: 50%;
                                    background-color: #e4393c;
                                    color: #fff;
                                    outline: none;
                                    border: none;
                                    margin: -4px 0px 0px -15px;
                                    
                                }
                                
                            }
                        }
                    }
                }

            }
        }
        .top{
            display: flex;
            .search{
            width: 325px;
            margin: 3px  0 0 0 ;
        }
        .return{
            margin: 20px 0 0 15px;
            font-size: 20px;
        }
    }
}
</style>